<template>
  <div>
    <ul v-if="list.length > 0" class="list">
      <li v-for="(item, index) in list" :key="index">
          <div class="order-h">
              <span>下单编号：{{item.order.orderId}}</span>
              <span class="time">下单时间：{{item.order.createTime | parseTime('{y}年{m}月{d}日  {h}:{i}:{s}')}}</span>
              <span v-if="item.order.amount" class="fr">实付款：<span class="icon-coin"></span>{{parseFloat(item.order.amount)}}</span>
              <span v-else class="fr">实付款：¥0</span>
          </div>
          <div class="order-c" v-if="item.plan">
              <img :src="item.plan.avatar" class="photo">
              <div class="info">
                  <span class="title ftz16">{{item.plan.name}}</span>
                  <span class="txt">{{item.plan.intro}}</span>
                  <div class="tip">
                      <span>来自：{{item.plan.author}}</span>
                      <span class="line"></span>
                      <span>订阅人数：{{item.plan.saleNum}}</span>
                      <span class="line"></span>
                      <span>服务期限：{{item.plan.beginTime | parseTime('{y}-{m}-{d}')}}至{{item.plan.endTime | parseTime('{y}-{m}-{d}')}}</span>
                  </div>
              </div>
              <div class="fr handle-1 handle">
                 <!-- 已经付款，未退款， -->
                <template v-if="item.subscribed === 0">
                  <span class="blue">交易关闭</span>
                  <span class="red">已退款</span>
                </template>
                <template v-else>
                  <!-- 未付款 -->
                  <template v-if="item.order.payStatus === 1">
                    <span class="red">等待付款</span>
                    <button @click="repay(item.plan)" class="red">去付款</button>
                    <button @click="delOrder(item, index)">取消订单</button>
                  </template>
                  <template v-else-if="item.order.payStatus === 2">
                    <!-- 预售 -->
                    <template v-if="currentTime < item.plan.beginTime">
                      <span class="blue">交易成功</span>
                      <button @click="delOrder(item, index)">删除订单</button>
                      <button @click="refund(item)">申请退款</button>
                    </template>
                    <template v-else>
                      <span class="blue">交易成功</span>
                    </template>
                  </template>
                </template>
              </div>
          </div>
      </li>
    </ul>
    <NoDataTips v-else/>
  </div>
</template>

<script>
import {
  cancelSubscribePlan,
  deleteOrder
} from '@/service/api'
export default {
  props: ['list'],
  data () {
    return {
      currentTime: new Date().getTime()
    }
  },
  methods: {
    delOrder (item, index) {
      let that = this
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">确认删除该订单吗</div>',
        btn: '确认',
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          that.execDeleteOrder(item, index)
          if (window.layer) {
            window.layer.closeAll()
          }
        }
      })
    },
    repay (item) {
      this.$router.push('/plan/pay/' + item.planId)
    },
    refund (item) {
      let title = '确认退款吗?'
      this.showConfirmBox(title, () => {
        this.execCancelSubscribePlan(item)
      })
    },
    // 取消订阅
    async execCancelSubscribePlan (item) {
      let res = await cancelSubscribePlan({planId: item.plan.planId})
      if (res) {
        this.showMsgTips('退款成功，款项将退回至原支付渠道，请您留意。')
        item.order.payStatus = 3
      } else {
        this.showMsgTips('退款失败！')
      }
    },
    // 删除订单
    async execDeleteOrder (item, index) {
      let res = await deleteOrder(item.order.orderId)
      if (res) {
        this.showMsgTips('删除成功！')
        this.$emit('delFn', index) // 父组件删除该项
      } else {
        this.showMsgTips('删除失败！')
      }
    },
    showConfirmBox (title, callback) {
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">' + title + '</div>',
        btn: '确认',
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          callback()
          if (window.layer) {
            window.layer.closeAll()
          }
        }
      })
    },
    showMsgTips (msg) {
      window.layui.layer.msg(msg)
    }
  }
}
</script>

<style scoped lang="scss">
.list li{
  padding: 20px 16px;
  border-bottom: 1px solid #e6e6e6;
}
.list li .order-h{
  height: 36px;
  color: #808080;
  line-height: 36px;
  background-color:#e8f3ff;
  padding: 0 22px;
  position: relative;
  margin-bottom: 20px;
}
.list li .order-h .time{
  position: absolute;
  width: 250px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.list .order-c .photo{
  display: inline-block;
  vertical-align: top;
  width: 95px;
  height: 95px;
  border-radius: 50%;
}
.list .order-c .info{
  display: inline-block;
  vertical-align: top;
  width: 660px;
  height: 95px;
  position: relative;
  margin-left: 18px;
}
.list .order-c .info .title{
  font-weight: bold;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list .order-c .info .txt{
  color: #808080;
  line-height: 22px;
  height: 44px;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 6px 0;
}
.list .order-c .info .tip{
  position: absolute;
  left: 0;
  bottom: 0;
  color: #808080;
  width: 100%;
}
.list .order-c .info .tip .line{
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 13px;
  background-color: #cccccc;
  margin: -4px 15px 0 15px;
}
.list .order-c .blue{
  color: #00a0e9 !important;
}
.list .order-c .handle{
  height: 101px;
  text-align: center;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  span{
    display: block;
    color: #808080;
    margin-bottom: 5px;
    &.red{
      color: #f23e3e;
    }
    &.blue{
      color: #00a0e9;
    }
  }
  button {
    width: 90px;
    height: 31px;
    border-radius: 16px;
    border: solid 1px #b2b2b2;
    display: block;
    color: #808080;
    margin-top: 10px;
    &.red {
      color: #f23e3e;
      border:1px solid #f23e3e;
    }
  }
}
</style>
